// import { Fragment, useCallback, useMemo,useState } from 'react';
// import {useSearchParam} from 'react-use'

// function SearchBox({ data }) {
//   const searchKey = useSearchParam("key") || "";

//   const [,setShow] = useState(false)
//   const handleShow = useCallback((c) => !c,[])

//   const filtered = useMemo(() => {
//     return data.filter((item) =>
//     item.title.toLowerCase().includes(searchKey.toLowerCase())
//     )
//   }, [searchKey, data]);
//   console.log(filtered)

//   const handleSearch = useCallback((evt) => {
//     window.history.pushState(
//       {},
//       "",
//       `${window.location.pathname}?key=${evt.target.value}`
//     )
//   }, [])
//   return (
//     <div className=' 08-filter-list'>
//       <h2>Movies (Search key in URL)</h2>
//       <input type="text"
//         value={searchKey}
//         placeholder="Search..."
//         onChange={(evt)=>{ handleSearch(evt) && handleShow()}}
//         // onChange={handleSearch}
//       />
//       <ul style={{ marginTop: 20 }}>
//         {
//           filtered.map((item) => {
//             return (
//               <Fragment key={item.id}>
//                 <li>
//                   {item.id}-{item.title}
//                 </li>
//                 <hr />
//               </Fragment>
//             )
//           })
//         }
//       </ul>
//     </div>
//   )
// }

// export default function SearchBoxToURL() {
//   const data = [
//     {
//       id: 1,
//       title: "Mein Kampf"
//     },
//     {
//       id: 2,
//       title: "Tumannost Andromedy"
//     },
//     {
//       id: 3,
//       title: "Terumae romae (Thermae Romae)"
//     },
//     {
//       id: 4,
//       title: "White Banners"
//     },
//     {
//       id: 5,
//       title: "Train, The"
//     },
//     {
//       id: 6,
//       title: "Julia and Julia (Giulia e Giulia)"
//     },
//     {
//       id: 7,
//       title: "Can Go Through Skin (Kan door huid heen)"
//     },
//     {
//       id: 8,
//       title: "Two Moon Junction"
//     },
//     {
//       id: 9,
//       title: "Bill & Ted's Bogus Journey"
//     },
//     {
//       id: 10,
//       title: "iSteve"
//     },
//     {
//       id: 11,
//       title: "Pee-wee's Big Adventure"
//     },
//     {
//       id: 12,
//       title: "Celestial Wives of the Meadow Mari (Nebesnye zheny lugovykh mari)"
//     },
//     {
//       id: 13,
//       title: "Railroaded!"
//     },
//     {
//       id: 14,
//       title: "Devil Hides in Doubt (Sollbruchstelle)"
//     },
//     {
//       id: 15,
//       title: "Honeymoon Killers, The"
//     },
//     {
//       id: 16,
//       title: "Hurricane, The"
//     },
//     {
//       id: 17,
//       title: "Cheaper by the Dozen"
//     },
//     {
//       id: 18,
//       title: "New Wave (Nouvelle vague)"
//     },
//     {
//       id: 19,
//       title: "Keep Your Right Up"
//     },
//     {
//       id: 20,
//       title: "Deathsport"
//     }
//   ];
//   return <SearchBox data={data} />;
// };

import React, { useCallback, useMemo,useState } from "react";
import { useSearchParam } from "react-use";

function SearchBox({ data }) {
  // const searchKey = useSearchParam("key") || "";
  const [search,setSearch] = useState("")

  const filtered = useMemo(() => {
    return data.filter((item) =>
      item.title.toLowerCase().includes(search.toLowerCase())
    );
  }, [search, data]);

  const handleSearch = useCallback((evt) => {
    setSearch(evt.target.value)
    window.history.pushState(
      {},
      "",
      `${window.location.pathname}?key=${evt.target.value}`
    );
  }, []);
  return (
    <div className="08-filter-list">
      <h2>Movies (Search key in URL)</h2>
      <input
        value={search}
        placeholder="Search..."
        onChange={handleSearch}
      />
      <ul style={{ marginTop: 20 }}>
        {filtered.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default function SearchBoxToURL() {
  const data = [
    {
      id: 1,
      title: "Mein Kampf"
    },
    {
      id: 2,
      title: "Tumannost Andromedy"
    },
    {
      id: 3,
      title: "Terumae romae (Thermae Romae)"
    },
    {
      id: 4,
      title: "White Banners"
    },
    {
      id: 5,
      title: "Train, The"
    },
    {
      id: 6,
      title: "Julia and Julia (Giulia e Giulia)"
    },
    {
      id: 7,
      title: "Can Go Through Skin (Kan door huid heen)"
    },
    {
      id: 8,
      title: "Two Moon Junction"
    },
    {
      id: 9,
      title: "Bill & Ted's Bogus Journey"
    },
    {
      id: 10,
      title: "iSteve"
    },
    {
      id: 11,
      title: "Pee-wee's Big Adventure"
    },
    {
      id: 12,
      title: "Celestial Wives of the Meadow Mari (Nebesnye zheny lugovykh mari)"
    },
    {
      id: 13,
      title: "Railroaded!"
    },
    {
      id: 14,
      title: "Devil Hides in Doubt (Sollbruchstelle)"
    },
    {
      id: 15,
      title: "Honeymoon Killers, The"
    },
    {
      id: 16,
      title: "Hurricane, The"
    },
    {
      id: 17,
      title: "Cheaper by the Dozen"
    },
    {
      id: 18,
      title: "New Wave (Nouvelle vague)"
    },
    {
      id: 19,
      title: "Keep Your Right Up"
    },
    {
      id: 20,
      title: "Deathsport"
    }
  ];
  return <SearchBox data={data} />;
};
